<template>
	<view>
<!-- 		<cu-custom bgColor="bg-gradual-blue" :isBack="true" :paddingHeight="0">
			<block #backText>返回</block>
			<block #content>按钮</block>
		</cu-custom> -->
		
		<!-- 页头色彩 -->

		<color-header>
			<!-- 轮播图 -->
			<view style="height: 120px;position: relative;padding: 10px 0;background-color: white;">
				<u-swiper
						radius="10"
						height="200"
						:list="list1"
						indicator
						indicatorMode="line"
						imgMode="aspectFill"
						:autoplay="true"
						:previousMargin="80"
						:nextMargin="80"
						:circular="true"
						
				></u-swiper>
			</view>
			
			<!-- 分类标签 -->
			<view style="background-color: #fff;height:40px;width: 100%;display: flex;justify-content: center;">
				<u-tabs :list="tabList" @click="onTabClick"
						
				        lineWidth="50rpx"
						lineHeight="8rpx"
				        lineColor="#f56c6c"
				        :activeStyle="{
				            color: '#000000',
				            fontWeight: 'bold',
				            transform: 'scale(1.0)',
							fontSize:'30rpx',
							
				        }"
				        :inactiveStyle="{
				            color: '#87898f',
				            transform: 'scale(1.0)',
							fontSize:'28rpx',
							fontWeight: 'bold'
				        }"
				        itemStyle="padding-left: 15px; padding-right: 15px;;height: 80rpx;"
				></u-tabs>
			</view>
		</color-header>
		
		


<!-- 		<view class="status_bar" style="background-color: #2f9eda;">
			在小程序中 不准确
		</view> -->

<!-- 		<view :style="{height:statusBarHeight + 'px'}">
		</view>
				
		<view :style="{height:navbarHeight + 'px'}">
		</view> -->
		
		<!-- 页面头衬 -->
		<view :style="{height:placeholdHeight + 120 + 40 + 'px'}" style="">
		</view>
		
<!-- 		<button type="default" @click="onHI" v-if="permission(['user'])">用户</button>
		<button type="default" @click="onHI" v-if="permission(['admin'])">管理员</button> -->
				
<!-- 		<u-navbar
			title="个人中心"
			:autoBack="false"
			:safeAreaInsetTop="true"
			:placeholder="true"
		>
		</u-navbar> -->
		
		<!-- 职位列表 -->
		<view v-for="i in 10">
			<!--<u-card margin="20rpx 0rpx" :show-head="false" :border-radius="0" :border="false">
				<view class="content" slot="body">
					<image class="logo" src="/static/logo.png"></image>
					<view>
						<text class="title">{{title}}</text>
					</view>
				</view>
			</u-card> -->

			<!-- 兼职卡片 -->
			<view style="background-color: #fff;border-radius: 10rpx;box-shadow: 1px 1px 1px #eee; margin: 12rpx">
				<view style="display: flex;justify-content: space-between;padding: 20rpx;">
					<view style="display: flex;justify-content: space-between;flex-direction: column;">
						<view style="font-size: 32rpx;margin-bottom: 20rpx;">
							6月10-11日 顺德喜来登酒店...
						</view>
						<view style="margin-bottom: 20rpx;">
							<span style="font-size: 34rpx;color: #f00;">16/小时</span> | <span style="font-size: 24rpx;color: #9c9c9c;">日结</span> | <span style="font-size: 24rpx;color: #9c9c9c;">服务员</span>
						</view>
						<view style="display: flex;align-items: center;">
							<span style="
							font-size: 24rpx; 
							color:#b6b6b6;"
							>广东掌聘人力资源有限公司</span>
							<span style="
								background-color: #fff4d7;
								border-radius: 100rpx;
								padding: 6rpx 20rpx;
								margin-left: 14rpx;
								text-align: center;
								color: #ff8725;
								font-size: 20rpx;
								">企业认证</span>
						</view>
					</view>
					
					<view style="position: relative;flex: 0 0 15%;">
						<view style="text-align: center">
							<span style="font-size: 18rpx;color:#9c9c9c;">前天</span>
						</view>
						<view style="position: absolute;top: 50%;right: 0;">
							<view @click="onConfirm" class="cu-btn round" style="
									display: flex;
									border-radius: 250px;
									font-size: 28rpx;
									background-color: #ff8725;
									color: white;
									height: 56rpx;
									width: 150rpx;
								">
								抢位置
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 打卡列表 -->
		<view v-for="i in 10">
			<view @click="onJob" style="padding: 24rpx;background-color: #fff;border-radius: 10rpx;box-shadow: 1px 1px 1px #eee;margin: 16rpx 16rpx;">
				<view style="padding-bottom: 20rpx;display: flex;font-size: 30rpx;">
					银行卡打卡信息
				</view>
				
				<view style="padding-bottom: 20rpx;display: flex;justify-content: space-between;font-size: 20rpx;">
					<view style="color: #9c9c9c;">
						<span>前天</span>
						 <span style="margin-left: 10rpx;">11:18</span>
						 <span style="margin-left: 10rpx;">填表</span> 
					</view>
					
					<view style="color: #9c9c9c;">
						<span>浏览 31</span>
						 <span style="margin-left: 20rpx;">参与2</span>
					</view>
				</view>
				
				<view style="color:#676767;display: flex;justify-content: space-between;padding: 0 20rpx;">
					<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="share-square" color="#ff8725d4" size="35"></u-icon> 邀请填写</view>
					<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="list" color="#ff8725d4" size="35"></u-icon> 数据表格</view>
					<view style="display: flex;align-items: center"><u-icon style="display: inline-block;padding-right:10rpx ;" name="more-circle" color="#ff8725d4" size="35"></u-icon> 更多</view>
				</view>
			</view>
		</view>
		
		<!-- 页面底衬 -->
		<!-- <view style="height: 140rpx;width: 100%;background-color: #f00;"></view> -->

		<!-- 底部操作条 -->
		<!-- view
			style="background-color: #fff;width: 100%;height: 140rpx;box-shadow: 1px 9px 20px 0px #000000d4;position: fixed;bottom: 0;">
			<view style="
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				">
				<view style="flex: 0 0 20%;text-align: center;color: #f00;">
					<view style="
						display: flex;
						flex-direction: column;
						align-items: center;">
						<u-icon name="setting" color="#9c9c9c" size="40"></u-icon>
						<p style="color: #9c9c9c;font-size: 24rpx;">管理</p>
					</view>
				</view>

				<view style="flex: 0 0 80%;">
					<view class="cu-btn round" style="
							display: flex;
							margin: 0 20rpx;
							border-radius: 250px;
							font-size: 30rpx;
							background-color: #ff8725d4;
							color: white;
							height: 90rpx;
						">
						立即提交
					</view>
				</view>
			</view>
		</view -->
	</view>
	
	<!-- 底部导航条 -->
	<tabbs></tabbs>
</template>

<script>
	import tabbs from '@/pages/tabbs/tabbas.vue'
	import colorHeader from '@/components/color-header/color-header.vue'
	export default {
		components:{tabbs,colorHeader},
		data() {
			return {
				tabBarIndex:0,
				title: 'Hello',
				tabList: [{
                    name: '我发布的',
                }, {
                    name: '我参与的',
                }, {
                    name: '我收藏的',
                }],
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		methods: {
			onHI(){
				console.log("HHIHI")
			},
			onConfirm(){
				uni.navigateTo({
					url:'/pages/job/details/details'
				})
			},
			onTabClick(){
				
			},
			onTabbarClick(index){
				console.log(index)
			},
			onJob(){
				setTimeout(()=>{
					uni.navigateTo({
						url:"/pages/job/details/details",
						
					})
				},500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep [class^="u-swiper__wrapper__item__wrapper__"]  {
		height: 100% !important;
		// width: 100% !important;
	}
</style>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	
	.nav_bar {
		height: var();
		width: 100%;
	}
	
	.u-page .__slot-icon {
		width: 17px;
		height: 17px;
	}
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
